<template>
  <div class="workspace-container">
    <!-- 顶部欢迎区域 -->
    <div class="welcome-section">
      <div class="welcome-left">
        <div class="avatar">
          <el-avatar :size="64" :src="avatar"></el-avatar>
        </div>
        <div class="welcome-info">
          <h1>{{ name }}，{{ getGreeting() }}</h1>
          <p class="subtitle">今日晴，{{ weather.temperature }}!</p>
        </div>
      </div>
      <div class="welcome-right">
        <div class="stat-item">
          <div class="stat-num">{{ stats.todoCount }}/{{ stats.totalTasks }}</div>
          <div class="stat-label">待办</div>
        </div>
        <div class="stat-item">
          <div class="stat-num">{{ stats.projectCount }}</div>
          <div class="stat-label">项目</div>
        </div>
        <div class="stat-item">
          <div class="stat-num">{{ stats.teamCount }}</div>
          <div class="stat-label">团队</div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <el-row :gutter="20" class="main-content">
      <el-col :span="16">
        <!-- 项目概览 -->
        <div class="section-card project-overview">
          <div class="section-header">
            <h2>项目</h2>
            <el-button type="text" class="view-more">查看全部</el-button>
          </div>
          <div class="project-grid">
            <div class="project-card" v-for="project in projects" :key="project.id">
              <div class="project-card-content">
                <div class="project-icon">
                  <img v-if="project.imgIcon" :src="project.imgIcon" class="img-icon" />
                </div>
                <div class="project-info">
                  <div class="project-title">
                    <span class="project-name">{{ project.name }}</span>
                  </div>
                  <div class="project-desc">{{ project.description }}</div>
                  <div class="project-meta">
                    <span class="project-team">{{ project.team }}</span>
                    <span class="project-date">{{ project.date }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 最新动态 -->
        <div class="section-card activity-overview">
          <div class="section-header">
            <h2>最新动态</h2>
            <el-button type="text" class="view-more">查看全部</el-button>
          </div>
          <div class="activity-list">
            <div v-for="activity in activities" :key="activity.id" class="activity-item" :data-type="activity.type">
              <div class="activity-user">
                <el-avatar :size="40" :src="activity.avatar"></el-avatar>
              </div>
              <div class="activity-content">
                <div class="activity-header">
                  <span class="user-name">{{ activity.username }}</span>
                  <span class="activity-time">{{ activity.time }}</span>
                </div>
                <div class="activity-text">
                  <span>{{ activity.content }}</span>
                  <span v-if="activity.link" class="activity-link">{{ activity.link }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>

      <el-col :span="8">
        <!-- 快捷导航 -->
        <div class="section-card nav-card">
          <div class="section-header">
            <h2>快捷导航</h2>
          </div>
          <div class="nav-container">
            <div v-for="nav in quickNavs" :key="nav.id" class="nav-item" @click="handleNavClick(nav)">
              <div class="nav-icon-wrapper" :class="'nav-color-' + nav.id">
                <i :class="'el-icon-' + nav.icon"></i>
              </div>
              <div class="nav-text">{{ nav.name }}</div>
            </div>
          </div>
        </div>
        
        <!-- 待办事项 -->
        <div class="section-card todo-section">
          <div class="section-header">
            <h2>待办事项</h2>
            <el-button type="text" class="view-more">查看全部</el-button>
          </div>
          <div class="todo-progress-container">
    <div class="todo-progress-info">
      <div class="progress-title">任务完成度</div>
      <div class="progress-percentage">{{ Math.round(checkedTodos.length / todos.length * 100) }}%</div>
    </div>
    <div class="todo-progress-bar">
      <div class="progress-bg"></div>
      <div class="progress-fill" :style="{width: Math.round(checkedTodos.length / todos.length * 100) + '%', backgroundColor: todoProgressColor}"></div>
      <div class="progress-markers">
        <div class="marker" v-for="n in 5" :key="n" :style="{left: (n-1)*25 + '%'}">
          <div class="marker-dot" :class="{'active': Math.round(checkedTodos.length / todos.length * 100) >= (n-1)*25}"></div>
          <div class="marker-text">{{ (n-1)*25 }}%</div>
        </div>
      </div>
    </div>
    <div class="progress-text">
      <span>{{ checkedTodos.length }}/{{ todos.length }}</span>
    </div>
  </div>
  <div class="todo-filter">
    <span class="filter-item" :class="{ 'active': todoFilter === 'all' }" @click="todoFilter = 'all'">全部</span>
    <span class="filter-item" :class="{ 'active': todoFilter === 'pending' }" @click="todoFilter = 'pending'">待完成</span>
    <span class="filter-item" :class="{ 'active': todoFilter === 'completed' }" @click="todoFilter = 'completed'">已完成</span>
  </div>
  <div class="todo-list">
    <el-checkbox-group v-model="checkedTodos">
      <div v-for="todo in filteredTodos" :key="todo.id" class="todo-item">
        <el-checkbox :label="todo.id">
          <div class="todo-content">
            <span class="todo-text" :class="{ 'completed': checkedTodos.includes(todo.id) }">
              {{ todo.content }}
            </span>
            <span class="todo-date">{{ todo.date }}</span>
          </div>
        </el-checkbox>
      </div>
    </el-checkbox-group>
  </div>
  <div v-if="todos.length === 0" class="empty-todo-state">
    <i class="el-icon-tickets empty-icon"></i>
    <p>暂无待办事项</p>
    <p class="empty-desc">点击下方按钮添加新的待办事项</p>
  </div>
          <div class="add-todo-btn" @click="addNewTodo">
            <i class="el-icon-plus"></i>
            <span>添加新待办</span>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'WorkSpace',
  data() {
    return {
      // userInfo: {
      //   name: 'echo',
      //   avatar: ''
      // },
      weather: {
        temperature: '20°C - 32°C'
      },
      stats: {
        todoCount: 2,
        totalTasks: 10,
        projectCount: 8,
        teamCount: 300
      },
      todoFilter: 'all',
      projects: [
        {
          id: 1,
          name: 'Github',
          description: '不要等待机会，而要创造机会。',
          team: '开源组',
          date: '2021-04-01',
          imgIcon: require('@/assets/icons/projects/Github.svg')
        },
        {
          id: 2,
          name: 'Vue',
          description: '现在的你决定将来的你。',
          team: '算法组',
          date: '2021-04-01',
          imgIcon: require('@/assets/icons/projects/Vue.svg')
        },
        {
          id: 3,
          name: 'Html5',
          description: 'Nothing can be more important than effort.',
          team: '上班摸鱼',
          date: '2021-04-01',
          imgIcon: require('@/assets/icons/projects/h5.svg')
        },
        {
          id: 4,
          name: 'Angular',
          description: '热情和欲望可以突破一切难关。',
          team: 'UI',
          date: '2021-04-01',
          imgIcon: require('@/assets/icons/projects/Angular.svg')
        },
        {
          id: 5,
          name: 'React',
          description: '健康的身体是实现目标的基石。',
          team: '技术牛',
          date: '2021-04-01',
          imgIcon: require('@/assets/icons/projects/React.svg')
        },
        {
          id: 6,
          name: 'JS',
          description: '路是走出来的，而不是空想出来的。',
          team: '架构组',
          date: '2021-04-01',
          imgIcon: require('@/assets/icons/projects/JS.svg')
        }
      ],
      activities: [
        {
          id: 1,
          username: 'jay',
          avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
          content: '在 开源组 创建了项目',
          link: 'Vue',
          time: '刚刚',
          type: 'primary'
        },
        {
          id: 2,
          username: 'echo',
          avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
          content: '关注了',
          link: 'test',
          time: '1个小时前',
          type: 'success'
        },
        {
          id: 3,
          username: 'test1',
          avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
          content: '发布了',
          link: '个人动态',
          time: '1天前',
          type: 'info'
        },
        {
          id: 4,
          username: 'test2',
          avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
          content: '发表文章',
          link: '如何搭建一个Vue插件',
          time: '2天前',
          type: 'warning'
        },
        {
          id: 5,
          username: 'test3',
          avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
          content: '回答了 echo 的问题',
          link: '如何进行项目优化?',
          time: '3天前',
          type: 'danger'
        },
        {
          id: 6,
          username: 'test3',
          avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
          content: '关闭了问题',
          link: '如何运行项目',
          time: '1周前',
          type: 'info'
        }
      ],
      quickNavs: [
        { id: 1, name: '首页', icon: 's-home' },
        { id: 2, name: '仪表盘', icon: 'data-line' },
        { id: 3, name: '组件', icon: 'menu' },
        { id: 4, name: '系统管理', icon: 'setting' },
        { id: 5, name: '权限管理', icon: 'user' },
        { id: 6, name: '图表', icon: 's-data' }
      ],
      todos: [
        {
          id: 1,
          content: '审查前端代码提交',
          date: '2024-07-30'
        },
        {
          id: 2,
          content: '系统性能优化',
          date: '2024-07-30'
        },
        {
          id: 3,
          content: '安全检查',
          date: '2024-07-30'
        }
      ],
      checkedTodos: []
    }
  },
  methods: {
    getGreeting() {
      const hour = new Date().getHours()
      console.log(hour);
      if (hour >= 5 && hour < 7) return '清晨好，新的开始，元气满满！'
      if (hour >= 7 && hour < 9) return '早安，开启充实的一天吧！'
      if (hour >= 9 && hour < 11) return '上午好，工作顺利哦～'
      if (hour >= 11 && hour < 13) return '中午好，记得适当休息和吃饭～'
      if (hour >= 13 && hour < 15) return '午后好，注意保持专注力～'
      if (hour >= 15 && hour < 17) return '下午好，加把劲，快结束了！'
      if (hour >= 17 && hour < 19) return '傍晚好，今天辛苦啦！'
      if (hour >= 19 && hour < 21) return '晚上好，可以适当放松一下了～'
      if (hour >= 21 && hour < 23) return '夜深了，早点休息哦～'
      return '深夜好，注意健康，别太晚睡了！'
    },
    
    calculatePercentage() {
      if (!this.todos || this.todos.length === 0) {
        return 0;
      }
      return Math.round(this.checkedTodos.length / this.todos.length * 100);
    },
    
    toggleTodo(todoId) {
      try {
        const index = this.checkedTodos.indexOf(todoId);
        if (index === -1) {
          this.checkedTodos.push(todoId);
          // 添加完成动画效果
          this.$nextTick(() => {
            const todoEl = document.querySelector(`.todo-item[data-id="${todoId}"]`);
            if (todoEl) {
              todoEl.classList.add('todo-complete-animation');
            }
          });
        } else {
          this.checkedTodos.splice(index, 1);
        }
        // 可以在这里添加完成待办的逻辑，如发送请求到后端
        console.log('待办状态变更:', todoId);
      } catch (error) {
        this.$message.error('操作失败，请稍后重试');
        console.error('切换待办状态出错:', error);
      }
    },
    
    handleTodoCommand(command, todoId) {
      if (command === 'edit') {
        this.editTodo(todoId);
      } else if (command === 'delete') {
        this.deleteTodo(todoId);
      }
    },
    
    editTodo(todoId) {
      try {
        const todo = this.todos.find(item => item.id === todoId);
        if (!todo) {
          this.$message.warning('未找到该待办事项');
          return;
        }
        
        this.$prompt('编辑待办事项', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue: todo.content,
          inputPattern: /\S+/,
          inputErrorMessage: '内容不能为空'
        }).then(({ value }) => {
          const index = this.todos.findIndex(item => item.id === todoId);
          if (index !== -1) {
            this.todos[index].content = value;
            this.$message({
              type: 'success',
              message: '编辑成功!'
            });
          }
        }).catch(err => {
          if (err !== 'cancel') {
            this.$message.error('编辑失败，请稍后重试');
            console.error('编辑待办出错:', err);
          }
        });
      } catch (error) {
        this.$message.error('操作失败，请稍后重试');
        console.error('编辑待办出错:', error);
      }
    },
    
    deleteTodo(todoId) {
      try {
        this.$confirm('确定要删除这个待办事项吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.todos = this.todos.filter(todo => todo.id !== todoId);
          this.checkedTodos = this.checkedTodos.filter(id => id !== todoId);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(err => {
          if (err !== 'cancel' && err !== 'close') {
            this.$message.error('删除失败，请稍后重试');
            console.error('删除待办出错:', err);
          }
        });
      } catch (error) {
        this.$message.error('操作失败，请稍后重试');
        console.error('删除待办出错:', error);
      }
    },
    
    addNewTodo() {
      this.$prompt('请输入待办事项内容', '添加待办', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\S+/,
        inputErrorMessage: '内容不能为空'
      }).then(({ value }) => {
        const newTodo = {
          id: Date.now(),
          content: value,
          date: new Date().toISOString().split('T')[0]
        };
        this.todos.push(newTodo);
        this.$message({
          type: 'success',
          message: '添加成功!'
        });
      }).catch(() => {
        // 取消添加
      });
    }
  },
  computed: {
    ...mapState('user', ['name', 'avatar']),
    
    todoProgressColor() {
      const percentage = this.calculatePercentage();
      if (percentage < 30) return '#f56c6c';
      if (percentage < 70) return '#e6a23c';
      return '#67c23a';
    },
    
    filteredTodos() {
      if (!this.todos || this.todos.length === 0) {
        return [];
      }
      
      if (this.todoFilter === 'all') {
        return this.todos;
      } else if (this.todoFilter === 'pending') {
        return this.todos.filter(todo => !this.checkedTodos.includes(todo.id));
      } else {
        return this.todos.filter(todo => this.checkedTodos.includes(todo.id));
      }
    }
  }
}
</script>

<style scoped>
.workspace-container {
  padding: 20px !important;
  margin: 0 !important;
  background: linear-gradient(to bottom, #f0f2f5, #f7f9fc);
  min-height: 100vh;
}

/* 卡片整体风格优化 */
.section-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px 18px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  color: #333333;
  border: 1px solid #ebeef5;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.section-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.welcome-section {
  background: linear-gradient(135deg, #3370ff, #5b8eff);
  border-radius: 16px;
  padding: 28px;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  border: none;
  box-shadow: 0 4px 16px rgba(51, 112, 255, 0.15);
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
}

.welcome-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="rgba(255,255,255,0.05)"/></svg>');
  background-size: 150px;
  opacity: 0.5;
}

.welcome-section:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(51, 112, 255, 0.2);
}

.welcome-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.welcome-info h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.subtitle {
  margin: 10px 0 0;
  opacity: 0.9;
  color: #ffffff;
  font-size: 15px;
}

.welcome-right {
  display: flex;
  gap: 40px;
}

.stat-item {
  text-align: center;
  transition: transform 0.2s;
  background: rgba(255, 255, 255, 0.15);
  padding: 12px 20px;
  border-radius: 12px;
}

.stat-item:hover {
  transform: scale(1.05);
  background: rgba(255, 255, 255, 0.25);
}

.stat-num {
  font-size: 28px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.stat-label {
  font-size: 14px;
  opacity: 0.9;
  color: #ffffff;
  margin-top: 4px;
}

/* Removed duplicate section-card styles */

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  position: relative;
}

.section-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: #333333;
  letter-spacing: 0.5px;
  padding-left: 12px;
  position: relative;
}

.section-header h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  background: #3370ff;
  border-radius: 2px;
}

.view-more {
  color: #3370ff;
  font-size: 13px;
}

.view-more:hover {
  color: #5b8eff;
}

.project-overview {
  background: #ffffff;
  color: #333333;
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.project-overview .section-header {
  padding: 24px 28px 0 28px;
  margin-bottom: 20px;
}

.project-overview .section-header h2 {
  color: #333333;
  font-size: 18px;
  font-weight: 600;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}

.project-card {
  background: #ffffff;
  border-right: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
  padding: 24px 20px 18px 20px;
  display: flex;
  align-items: flex-start;
  transition: all 0.3s;
  min-height: 120px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.project-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(to right, #3370ff, #5b8eff);
  transition: width 0.3s ease;
}

.project-card:hover::after {
  width: 100%;
}

.project-card:nth-child(3n) {
  border-right: none;
}

.project-card:nth-last-child(-n+3) {
  border-bottom: none;
}

.project-card:hover {
  background: #f9fafc;
  transform: translateY(-2px);
}

.project-card-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.project-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 48px;
  width: 48px;
  background: #f5f7fa;
  border-radius: 12px;
  justify-content: center;
  transition: transform 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.project-card:hover .project-icon {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.img-icon {
  width: 32px;
  height: 32px;
  display: block;
}

.project-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.project-title {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.project-name {
  font-size: 18px;
  font-weight: 600;
  color: #333333;
  margin-right: 8px;
}

.project-desc {
  color: #606266;
  font-size: 14px;
  margin-bottom: 18px;
  line-height: 1.6;
  word-break: break-all;
  opacity: 0.9;
}

.project-meta {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
}

.project-team {
  color: #3370ff;
  font-size: 13px;
  background: rgba(51, 112, 255, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
}

.project-date {
  color: #909399;
  font-size: 13px;
}

.activity-overview {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.activity-list {
  display: flex;
  flex-direction: column;
}

.activity-item {
  display: flex;
  padding: 16px;
  border-bottom: 1px solid #ebeef5;
  transition: all 0.3s;
  cursor: pointer;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-item:hover {
  background-color: #f9fafc;
  transform: translateX(4px);
}

.activity-user {
  margin-right: 16px;
}

.activity-user .el-avatar {
  border: 2px solid transparent;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.activity-item:hover .activity-user .el-avatar {
  border-color: #3370ff;
  transform: scale(1.05);
}

.activity-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.user-name {
  font-weight: 600;
  color: #333333;
  font-size: 16px;
}

.activity-time {
  color: #909399;
  font-size: 14px;
}

.activity-text {
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
}

.activity-link {
  color: #3370ff;
  margin-left: 4px;
  transition: color 0.3s;
}

.activity-item:hover .activity-link {
  color: #5b8eff;
  text-decoration: underline;
}

/* Removed dark-themed navigation styles */

/* Removed old navigation icon colors */

/* Removed old responsive adjustments */

@media screen and (max-width: 768px) {
  .welcome-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .welcome-right {
    width: 100%;
    justify-content: space-between;
  }

  .el-col {
    width: 100% !important;
  }

  .project-grid {
    grid-template-columns: 1fr;
  }

  .project-card {
    border-right: none !important;
  }

  .project-card:not(:last-child) {
    border-bottom: 1px solid #ebeef5 !important;
  }
  
  .nav-container {
    grid-template-columns: 1fr;
  }
}

/* 快捷导航区域样式 */
.nav-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.nav-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f9fafc;
  border-radius: 10px;
  padding: 20px 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #ebeef5;
  position: relative;
  overflow: hidden;
}

.nav-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent);
  transition: height 0.3s ease;
}

.nav-item:hover::after {
  height: 100%;
}

.nav-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  background: #ffffff;
}

.nav-icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 50px;
  border-radius: 12px;
  margin-bottom: 12px;
  transition: all 0.3s;
}

.nav-icon-wrapper i {
  font-size: 24px;
}

.nav-item:hover .nav-icon-wrapper {
  transform: scale(1.1);
}

.nav-text {
  font-size: 14px;
  font-weight: 500;
  color: #333333;
  margin-top: 8px;
}

.nav-color-1 {
  background-color: rgba(51, 112, 255, 0.1);
  color: #3370ff;
}

.nav-color-2 {
  background-color: rgba(255, 87, 34, 0.1);
  color: #ff5722;
}

.nav-color-3 {
  background-color: rgba(255, 193, 7, 0.1);
  color: #ffc107;
}

.nav-color-4 {
  background-color: rgba(76, 175, 80, 0.1);
  color: #4caf50;
}

.nav-color-5 {
  background-color: rgba(156, 39, 176, 0.1);
  color: #9c27b0;
}

.nav-color-6 {
  background-color: rgba(0, 188, 212, 0.1);
  color: #00bcd4;
}

/* 响应式调整 */
@media screen and (max-width: 1200px) {
  .nav-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .nav-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  .nav-item {
    padding: 15px 8px;
  }
  
  .nav-icon-wrapper {
    width: 40px;
    height: 40px;
  }
  
  .nav-icon-wrapper i {
    font-size: 20px;
  }
  
  .nav-text {
    font-size: 12px;
  }
}

/* 待办事项区域样式 */
.todo-section {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
}

.todo-progress-container {
  margin: 0 0 20px;
  padding: 0 10px;
}

.todo-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.progress-title {
  font-size: 14px;
  color: #606266;
}

.progress-percentage {
  font-size: 18px;
  font-weight: 600;
  color: #3370ff;
}

.todo-progress-bar {
  position: relative;
  height: 10px;
  border-radius: 10px;
  margin: 15px 0;
  overflow: visible;
}

.progress-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f0f2f5;
  border-radius: 10px;
}

.progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 10px;
  transition: width 0.5s;
}

.progress-markers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.marker {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}

.marker-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #f0f2f5;
  border: 2px solid #e0e0e0;
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s;
  z-index: 2;
}

.marker-dot.active {
  background: #3370ff;
  border-color: #ffffff;
  box-shadow: 0 2px 6px rgba(51, 112, 255, 0.4);
}

.marker-text {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #909399;
  white-space: nowrap;
}

.progress-text {
  display: flex;
  justify-content: flex-end;
  font-size: 13px;
  color: #606266;
  margin-top: 25px;
}

.todo-container {
  display: flex;
  flex-direction: column;
}

.todo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 4px;
}

.todo-progress {
  flex: 1;
  margin-right: 16px;
}

.progress-text {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
  color: #e5eaf3;
}

.progress-label {
  color: #909399;
}

.todo-list {
  padding: 0 10px;
  max-height: 300px;
  overflow-y: auto;
}

.todo-item {
  padding: 12px 0;
  border-bottom: 1px solid #ebeef5;
}

.todo-item:last-child {
  border-bottom: none;
}

.el-checkbox {
  margin-right: 10px;
  transform: scale(1.08);
}

.todo-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 8px;
}

.todo-date {
  font-size: 12px;
  color: #909399;
}

.todo-text {
  font-size: 14px;
  color: #303133;
  margin-right: 20px;
}

.completed {
  text-decoration: line-through;
  color: #909399;
}

.el-checkbox__input.is-checked + .el-checkbox__label .todo-content .completed {
  color: #67c23a;
  opacity: 0.5;
}

.el-checkbox__input.is-checked .el-checkbox__inner {
  border-color: #67c23a;
  background-color: #67c23a;
}

.el-checkbox__input .el-checkbox__inner {
  border-radius: 5px;
  transition: border-color 0.2s, background 0.2s;
}

/* 主要内容区域间距优化 */
.main-content {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
}

/* 添加新的待办按钮 */
.add-todo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  padding: 12px 0;
  background-color: #f5f7fa;
  border-radius: 8px;
  color: #3370ff;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px dashed #c0c4cc;
}

.add-todo-btn:hover {
  background-color: rgba(51, 112, 255, 0.1);
  border-color: #3370ff;
}

.add-todo-btn i {
  margin-right: 6px;
}

/* 添加一些动画效果 */
@keyframes progressPulse {
  0% { box-shadow: 0 0 0 0 rgba(51, 112, 255, 0.4); }
  70% { box-shadow: 0 0 0 6px rgba(51, 112, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(51, 112, 255, 0); }
}

.marker-dot.active:last-of-type {
  animation: progressPulse 2s infinite;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

.todo-item {
  animation: slideIn 0.3s ease-out;
}

/* 添加一些动画效果 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.project-card, .activity-item, .nav-item, .todo-item {
  animation: fadeIn 0.5s ease-out;
}

/* 为不同类型的活动添加不同的标记颜色 */
.activity-item {
  position: relative;
}

.activity-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 3px;
  opacity: 0;
  transition: all 0.3s;
}

.activity-item:hover::before {
  opacity: 1;
}

.activity-item[data-type="primary"]::before {
  background-color: #3370ff;
}

.activity-item[data-type="success"]::before {
  background-color: #67c23a;
}

.activity-item[data-type="info"]::before {
  background-color: #909399;
}

.activity-item[data-type="warning"]::before {
  background-color: #e6a23c;
}

.activity-item[data-type="danger"]::before {
  background-color: #f56c6c;
}

/* 响应式优化 */
@media (max-width: 900px) {
  .section-card {
    padding: 12px 6px;
    margin-bottom: 12px;
  }
  .todo-item {
    font-size: 13px;
    padding: 8px 6px;
  }
  .todo-date {
    font-size: 11px;
    margin-left: 6px;
  }
}

.todo-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.todo-tag {
  font-size: 12px;
  padding: 0 6px;
  height: 20px;
  line-height: 18px;
  background: #333;
  border: none;
}

.todo-priority {
  font-size: 12px;
  color: #e6a23c;
}

.todo-actions {
  margin-left: 12px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #909399;
  font-size: 16px;
  transition: all 0.3s;
}

.el-dropdown-link:hover {
  color: #409EFF;
}

.empty-todo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  color: #909399;
}

.empty-todo i {
  font-size: 48px;
  margin-bottom: 16px;
  color: #555;
}

.empty-todo p {
  margin-bottom: 16px;
}

/* 待办项动画 */
.todo-item-enter-active, .todo-item-leave-active {
  transition: all 0.5s;
}

.todo-item-enter, .todo-item-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

.todo-item-move {
  transition: transform 0.5s;
}

/* 空状态样式 */
.empty-todo-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  color: #909399;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  color: #dcdfe6;
}

.empty-todo-state p {
  margin: 0;
  font-size: 16px;
}

.empty-desc {
  font-size: 14px !important;
  margin-top: 8px !important;
  color: #c0c4cc;
}

/* 错误状态提示 */
.error-message {
  color: #f56c6c;
  font-size: 14px;
  text-align: center;
  margin: 10px 0;
  padding: 8px;
  background-color: rgba(245, 108, 108, 0.1);
  border-radius: 4px;
}

/* 待办筛选器样式 */
.todo-filter {
  display: flex;
  margin-bottom: 16px;
  border-bottom: 1px solid #ebeef5;
  padding: 0 10px;
}

.filter-item {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  color: #606266;
  position: relative;
}

.filter-item:hover {
  color: #3370ff;
}

.filter-item.active {
  color: #3370ff;
  font-weight: 500;
}

.filter-item.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #3370ff;
  border-radius: 2px 2px 0 0;
}

</style>